<%@page import="com.hotel.util.DateUtil"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@page import="java.util.Date" %>
	<%@page import="java.text.SimpleDateFormat" %>
	<%@taglib uri="/webFormatUtil"  prefix="webFormatUtil"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@taglib uri="/typeUtil"  prefix="typeUtil"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Luxe &mdash; 100% Free Fully Responsive HTML5 Template </title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Free HTML5 Template by FREEHTML5" />
	<meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />
	

  

  	<!-- Facebook and Twitter integration -->
	<meta property="og:title" content=""/>
	<meta property="og:image" content=""/>
	<meta property="og:url" content=""/>
	<meta property="og:site_name" content=""/>
	<meta property="og:description" content=""/>
	<meta name="twitter:title" content="" />
	<meta name="twitter:image" content="" />
	<meta name="twitter:url" content="" />
	<meta name="twitter:card" content="" />

	<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
	<link rel="shortcut icon" href="favicon.ico">
	<!-- <link href='https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700italic,900,700,900italic' rel='stylesheet' type='text/css'> -->

	<!-- Stylesheets -->
	<!-- Dropdown Menu -->
	<link rel="stylesheet" href="css/superfish.css">
	<!-- Owl Slider -->
	<!-- <link rel="stylesheet" href="css/owl.carousel.css"> -->
	<!-- <link rel="stylesheet" href="css/owl.theme.default.min.css"> -->
	<!-- Date Picker -->
	<link rel="stylesheet" href="css/bootstrap-datepicker.min.css">
	<!-- CS Select -->
	<link rel="stylesheet" href="css/cs-select.css">
	<link rel="stylesheet" href="css/cs-skin-border.css">

	<!-- Themify Icons -->
	<link rel="stylesheet" href="css/themify-icons.css">
	<!-- Flat Icon -->
	<link rel="stylesheet" href="css/flaticon.css">
	<!-- Icomoon -->
	<link rel="stylesheet" href="css/icomoon.css">
	<!-- Flexslider  -->
	<link rel="stylesheet" href="css/flexslider.css">
	
	<!-- Style -->
	<link rel="stylesheet" href="css/style.css">

	<!-- Modernizr JS -->
	<script src="js/modernizr-2.6.2.min.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
	<![endif]-->

</head>
<body>
	<div id="fh5co-wrapper">
	<div id="fh5co-page">
	<div id="fh5co-header">
		<header id="fh5co-header-section">
			<div class="container">
				<div class="nav-header">
					<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
					<h1 id="fh5co-logo"><a href="index.html">XXX宾馆</a></h1>
					<nav id="fh5co-menu-wrap" role="navigation">
						<ul class="sf-menu" id="fh5co-primary-menu">
							<li><a class="active" href="index.html">主页</a></li>
							<li>
								<a href="hotel.html" class="fh5co-sub-ddown">房型</a>
								<ul class="fh5co-sub-menu">
								 	<li><a href="#">标准间</a></li>
								 	<li><a href="#">大床房</a></li>
									<!--<li>
										<a href="#" class="fh5co-sub-ddown">King Hotel</a>
										<ul class="fh5co-sub-menu">
											<li><a href="#/preview/?item=build-free-html5-bootstrap-template" target="_blank">Build</a></li>
											<li><a href="#/preview/?item=work-free-html5-template-bootstrap" target="_blank">Work</a></li>
											<li><a href="#/preview/?item=light-free-html5-template-bootstrap" target="_blank">Light</a></li>
											<li><a href="#/preview/?item=relic-free-html5-template-using-bootstrap" target="_blank">Relic</a></li>
											<li><a href="#/preview/?item=display-free-html5-template-using-bootstrap" target="_blank">Display</a></li>
											<li><a href="#/preview/?item=sprint-free-html5-template-bootstrap" target="_blank">Sprint</a></li>
										</ul>
									</li>-->
									<li><a href="#">总统套房</a></li> 
								</ul>
							</li>
							<li><a href="services.html">服务</a></li>
							<!--<li><a href="blog.html">Blog</a></li>
							<li><a href="contact.html">Contact</a></li>-->
						</ul>
					</nav>
				</div>
			</div>
		</header>
		
	</div>
	<!-- 封面 -->
	<!-- end:fh5co-header -->
	<aside id="fh5co-hero" class="js-fullheight">
		<div class="flexslider js-fullheight">
			<ul class="slides">
		   	<li style="background-image: url(images/cover1.jpeg);">
		   		<div class="overlay-gradient"></div>
		   		<div class="container">
		   			<div class="col-md-12 col-md-offset-0 text-center slider-text">
		   				<div class="slider-text-inner js-fullheight">
		   					<div class="desc">
		   						<p><span>外景</span></p>
		   						<h2>美观的外景</h2>
		   					</div>
		   				</div>
		   			</div>
		   		</div>
		   	</li>
		   	<li style="background-image: url(images/cover2.jpeg);">
		   		<div class="overlay-gradient"></div>
		   		<div class="container">
		   			<div class="col-md-12 col-md-offset-0 text-center slider-text">
		   				<div class="slider-text-inner js-fullheight">
		   					<div class="desc">
		   						<p><span>装修</span></p>
		   						<h2>温馨的装修</h2>
		   					</div>
		   				</div>
		   			</div>
		   		</div>
		   	</li>
		   	<li style="background-image: url(images/cover3.jpeg);">
		   		<div class="overlay-gradient"></div>
		   		<div class="container">
		   			<div class="col-md-12 col-md-offset-0 text-center slider-text">
		   				<div class="slider-text-inner js-fullheight">
		   					<div class="desc">
		   						<p><span>房间</span></p>
		   						<h2>舒适的房间</h2>
		   					</div>
		   				</div>
		   			</div>
		   		</div>
		   	</li>
		   	
		  	</ul>
	  	</div>
	</aside>
	
	<!-- 输入框 -->
	<div class="wrap">
		<div class="container">
			<div class="row">
				<div id="availability">
					<form action="#">
<%
	String now=""+request.getAttribute("currentFromStr");
	String nextDay=""+request.getAttribute("currentToStr");
	String fir[]=now.split("-");
	String nowStr=fir[1]+"/"+fir[2]+"/"+fir[0];
	fir=nextDay.split("-");
	String nextStr=fir[1]+"/"+fir[2]+"/"+fir[0];
%>
						<div class="a-col">
							<section>
								<select id="roomType" class="cs-select cs-skin-border">
									<option value="-1" ${currentType==-1?'selected':' ' }>全部房型</option>
									<c:forEach items="${requestScope.types }" var="type">
										<option value="${type.id}" ${currentType==type.id?'selected':' '}>${type.name }</option>
									</c:forEach>
								</select>
							</section>
						</div>
						<div class="a-col alternate">
							<div class="input-field">
								<label for="date-start">入住时间</label>
								<input type="text"  class="form-control" value='<%=nowStr %>' id="date-start" />
							</div>
						</div>
						<div class="a-col alternate">
							<div class="input-field">
								<label for="date-end">退房时间</label>
								<input type="text"  class="form-control" value='<%=nextStr %>' id="date-end" />
							</div>
						</div>
						<div class="a-col action" onclick="selectRooms()">
							<a>
								<span>检查</span>
								剩余房间
							</a>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
    <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >手机网站模板</a></div>
	
	<div id="featured-hotel" class="fh5co-bg-color">
		<div class="container">
			
			<div class="row">
				<div class="col-md-12">
					<div class="section-title text-center">
						<h1>快速进入订单</h1>
						<div class="form-field">
							<form action='/hotel/reserve/getReserve' method='post'>
								订单id:<input name='id' type="text" placeholder="订单号" id="email">
								订单密码：<input name='password' type="text" placeholder="密码" id="email">	
								<input type="submit" value="提交" class="btn btn-primary btn-lg">
							<!--  	<button class="btn btn-primary btn-lg">提交</button>-->
							</form>
						</div>
					</div>
				</div>
			</div>
			<c:if test="${empty requestScope.roomList }">
				<h1>暂时还没有可以住的房间</h1>
			</c:if>
			<c:if test="${!empty requestScope.roomList }">
				<div class="row">
					<c:forEach items="${requestScope.roomList }" var="room">
					
						<!-- 一列信息 -->
						<div class="feature-full-1col">
							<div class="image" style="background-image: url(/hotel/upload/${room.pic });">
								<div class="descrip text-center">
									<<p><small>价格</small><span>￥${typeUtil:getTypePrice(room.typeId)*room.discount/100.0 }/晚</span></p>
								</div>
							</div>
							<div class="desc">
								<h3>${room.name}</h3>
								<h3>${room.floor }F-${typeUtil:getTypeName(room.typeId)}</h3>
								<p>房间设施：<br>${ webFormatUtil:txtToHtml(typeUtil:getTypeFac(room.typeId))}</p>
								<p>添加时间：${room.addDate }</p>
								<p><button class="btn btn-primary btn-luxe-primary" onclick="checkBut(${room.id},${typeUtil:getTypePrice(room.typeId)*room.discount/100.0 })"<c:if test='${room.condi!=0 }'>disabled</c:if> >${room.condi==0?'预定':'不可预定'}<i class="ti-angle-right"></i></button>
							<!-- 	<a href="#">预定<i class="ti-angle-right"></i></a> --></p>
							</div>
						</div>
					</c:forEach>
					<center>
						<a href="/hotel/visitor/roomList?page=1&type=${currentType }&fromStr=${currentFromStr}&toStr=${currentToStr}" class="btn btn-primary btn-lg">首页</a>
						<a href="/hotel/visitor/roomList?page=${currentPage==1?1:currentPage-1}&type=${currentType }&fromStr=${currentFromStr}&toStr=${currentToStr}" class="btn btn-primary btn-lg">上一页</a>
						<a href="/hotel/visitor/roomList?page=${currentPage+1 }&type=${currentType }&fromStr=${currentFromStr}&toStr=${currentToStr}" class="btn btn-primary btn-lg">下一页</a>
					</center>
				</div>
			</c:if>
			
		</div>
	</div>
	<style>
		#inputDiv{
    		display:none;
		}
	</style>
	
	<div id="inputDiv" class="form-field">
		<center>
		<input type="hidden" id="calcPrice">
		<input type="hidden" id="roomId" name='id'>
		<label>入住时间:</label><label id="inTime">2018-03-05</label>~<label id="outTime">2018-05-05</label><br>
		<label for="num">入住人数:</label>
		<select id="number">
			<option value="1" selected>1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select><br>
			<label for="phone">联系电话:</label><input type="text" id="phone" name='phone'><br>
			<label>价格:</label><label id="cost">0.0</label><br>
			<label for="zcomment">备注:</label><br>
			<textarea cols="20" rows="10" id="zcomment" name='zcomment'></textarea><br>
			<button id="sub" class="btn btn-primary btn-lg">提交</button>
			<button id="cancel" class="btn btn-primary btn-lg">取消</button>
		</center>
	</div>
	<footer id="footer" class="fh5co-bg-color">
		<div class="container">
			<div class="row">
				<div class="col-md-3">
					<div class="copyright">
						<p><small>&copy; 2016 Free HTML5 Template. <br> All Rights Reserved. <br>
						More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a> <br> Demo Images: <a href="#" target="_blank">Unsplash</a></small></p>
					</div>
				</div>
			</div>
		</div>
	</footer>
	<!-- END fh5co-page -->

	</div>
	<!-- END fh5co-wrapper -->
	
	<!-- Javascripts -->
	<script src="js/jquery-2.1.4.min.js"></script>
	<!-- Dropdown Menu -->
	<script src="js/hoverIntent.js"></script>
	<script src="js/superfish.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Waypoints -->
	<script src="js/jquery.waypoints.min.js"></script>
	<!-- Counters -->
	<script src="js/jquery.countTo.js"></script>
	<!-- Stellar Parallax -->
	<script src="js/jquery.stellar.min.js"></script>
	<!-- Owl Slider -->
	<!-- // <script src="js/owl.carousel.min.js"></script> -->
	<!-- Date Picker -->
	<script src="js/bootstrap-datepicker.min.js"></script>
	<!-- CS Select -->
	<script src="js/classie.js"></script>
	<script src="js/selectFx.js"></script>
	<!-- Flexslider -->
	<script src="js/jquery.flexslider-min.js"></script>

	<script src="js/custom.js"></script>
	<script src="js/layer.js"></script>
	<script type="text/javascript" src="/hotel/js/timeUtil.js"></script>
	<script type="text/javascript">
		function getStandardDate(str){
			strs=str.split('/')
			//alert(strs)
			return strs[2]+'-'+strs[0]+'-'+strs[1]
		}
		function selectRooms(){
			location.href='/hotel/visitor/roomList?fromStr='+getStandardDate($("#date-start").val())+'&toStr='+getStandardDate($("#date-end").val())
					+'&type='+$("#roomType").val()
			//alert(JSON.stringify(data))
		}
		index=-1
		function checkBut(id,price){
			$('#roomId').val(id);
			//var add=document.getElementById('inputDiv')
			//add.style.display='block'
			$('#inTime').text(getStandardDate($("#date-start").val()))
			$('#outTime').text(getStandardDate($("#date-end").val()))
			//$('#inputDiv').css("display","block");
			$('#calcPrice').val(price)
			index=layer.open({
		        type:1,
		        title:"预定",
		        area:["700px","700px"],
		        content:$("#inputDiv"),
		     });
			calcRoomPrice()
		}
		$('#cancel').click(function(){
			layer.close(index)
			//var add=document.getElementById('inputDiv')
			//add.style.display='none'
			//$('#cancel').click()
		})
		function calcRoomPrice(){
			str1=getStandardDate($("#date-start").val())+' 00:00:00';
			str2=getStandardDate($("#date-end").val())+' 00:00:00';
			//alert($('#calcPrice').val())
			$('#cost').text(getDurDays(str1,str2)*$('#calcPrice').val())
		}
		$.ajaxSettings.async = false;
		$('#sub').click(function(){
			data={'id':$('#roomId').val(),'inDate':$('#inTime').text(),'outDate':$('#outTime').text(),'num':$('#number').val(),
					'phone':$('#phone').val(),'zcomment':$('#zcomment').val()}
			//alert(JSON.stringify(data))
			//alert('房间id:'+$('#roomId').val()+'\n入住时间:'+$('#inTime').val()+'\n退房时间'+$('#outTime').val()+'\n入住人数'+$('#num').val()
			//		+'\n联系电话'+$('#phone').val()+'\n备注'+$('#zcomment').text()+"\n价格:"+$('#cost').text())
			$.post('/hotel/reserve/checkRoom',data,function(str){
				var res=eval('(' +str + ')')
				if(res.code!=0){
					alert(res.message)
					obje=res.object
					if(res.code==1)
						window.location.href="/hotel/reserve/getReserve?id="+obje.orderId
					return;
				}else{
					obje=res.object
					window.location.href="/hotel/reserve/getReserve?id="+obje.orderId
				}
			})
		})
		$.ajaxSettings.async = true
	</script>
	
</body>
</html>